<template>
  <div class="main" style="height: 600px">
    <h2 style="padding-left: 50px">订单状态：</h2>
    <el-table :data="tableData"  stripe style="width: 100%;">
      <el-table-column align="center" prop="id" label="订单号"></el-table-column>
      <el-table-column align="center" sortable prop="datetime" label="日期"></el-table-column>
      <el-table-column align="center" prop="price" label="价格"></el-table-column>
      <el-table-column align="center" prop="status" :formatter="orderStatus" label="状态"></el-table-column>
      <!--<el-table-column align="center" prop="status" v-else-if="this.tableData.status === 1" label="状态">已付款</el-table-column>-->
      <!--<el-table-column align="center" v-else-if="this.tableData.status === 2" label="状态">未发货</el-table-column>-->
      <!--<el-table-column align="center" v-else-if="this.tableData.status === 3" label="状态">已发货</el-table-column>-->
      <!--<el-table-column prop="address" label="地址"></el-table-column>-->
      <el-table-column align="center" fixed="right" label="操作" width="180">
        <template #default="scope">
          <el-button  @click="handleEdit(scope.row.id)" type="primary">详情</el-button>
          <!--<el-popconfirm title="你确定要删除该数据吗？" @click="del(scope.row.id)">-->
          <!--  <template #reference>-->
          <!--    <el-button type="danger">删除</el-button>-->
          <!--  </template>-->
          <!--</el-popconfirm>-->
        </template>
      </el-table-column>
    </el-table>
    <div class="button">
      <router-link to="/UltraAce"><el-button>继续购物</el-button></router-link>
    </div>
  </div>
  <el-dialog v-model="dialogTableVisible" title="订单详情">
    <el-table :data="gridData">
      <!--<el-table-column property="date" label="Date" width="150" />-->
      <el-table-column align="center" property="name" label="商品名" style="width: 80%"/>
      <el-table-column align="center" property="price" label="单价" style="width: 80%"/>
      <el-table-column align="center" property="count" label="数量" style="width: 80%"/>
      <el-table-column align="center" property="totalPrice" label="总价" style="width: 80%"/>
    </el-table>
  </el-dialog>
</template>

<script>
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

export default {
  data() {
    return {
      dialogTableVisible: false,
      hireType: [
        {
          id: 0,
          value: '未付款'
        },
        {
          id: 1,
          value: '已付款'
        },
        {
          id: 2,
          value: '未发货'
        },
        {
          id: 3,
          value: '已发货'
        },
      ],
      gridData: [{
        name: 'iphone',
        price: 122,
        count: 2,
        totalPrice: 244
      },
        {
          name: 'iphone',
          price: 122,
          count: 2,
          totalPrice: 244
        }
      ],
      tableData: [{
        datetime: '2016-05-02',
        id: '王小虎',
        price: 123,
        status: '已付款'
      },
        {
          datetime: '2016-05-02',
          id: '王小虎',
          price: 132,
          status: '已发货'
        }]
    }
  },
  created() {
    this.orderList();
  },
  methods: {
    handleEdit(orderId){
      this.dialogTableVisible = true;
      request.get("/api/orderItemList/" + orderId).then(
          res => {
            // console.log("res", res);
            if (res.code === '200'){
              this.gridData = res.data
              // console.log("gridData", this.gridData)
            }
            if (res.code === '555'){
              ElMessage({
                message: '操作失败',
                type: 'error',
              })
            }
          }
      )
    },
    orderList(){
      request.post("/api/orderList").then(
          res => {
            // console.log("res=", res);
            if (res.code === '200'){
              this.tableData = res.data
            }
            if (res.code === '222'){
              ElMessage({
                message: res.msg,
                type: 'warning',
              })
            }
            if (res.code === '555'){
              ElMessage({
                message: '请先登录',
                type: 'error',
              })
            }
          }
      )
    },
    orderStatus(row, column, cellValue){
      const obj = this.hireType.find(item => item.id === cellValue);
      return obj ? obj.value : '你猜';
    },
  }
}
</script>
<style>
.main {
  margin: 20px;
  position: relative;
}

.button {
  margin-top: 10px;
  margin-left: 1000px;
}
</style>